<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .in-style{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            margin-top: 30vh;
            /* border: 1px solid red; */
        }
        .border-circular-left{
            width: 30px;
            height: 30px;
            /* border: 1px solid black; */
            border-radius: 50%;
            margin-top: 20px;
        }
        .border-circular-right{
            width: 30px;
            height: 30px;
            /* border: 1px solid black; */
            border-radius: 50%;
            margin-top: 20px;
        }
        .border-circular{
            width: 50px;
            height: 50px;
            /* border: 1px solid black; */
            border-radius: 50%;
            margin-top: 20px;
            
        }
        .word-style{
            width: 400px;
            margin: 0 auto;
        }
        .left-color{
            position: absolute;
            width: 150px;
            height: 100%;
            left: 0;
            top: 0;
        }
        .right-color{
            position: absolute;
            /* width: 150px; */
            height: 100%;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="left-color" id="left-border">
        
    </div>
    <div class="right-color" id="right-border">
        
    </div>
    <div class="in-style">
        <div class="word-style">
                <span>WHATS YOUR LUCKY COLOR FOR TODAY?</span> 
                <!-- <button onclick="buttonClick()">start</button> -->
                <div class="border-circular" id="circular">
        </div>
        
            
        </div>
    </div>
    <script>

        let colorList = ["yellow","red","purple","blue","green","orange"]
        let circular = document.getElementById("circular")
        var leftBorder = document.getElementById("left-border")
        for(let i = 0 ;i<15;i++){
           let div = document.createElement("div")
           div.className = "border-circular-left"
           div.style.backgroundColor = colorList[i%6]
            leftBorder.appendChild(div)
        }
        var rightBorder = document.getElementById("right-border")
        for(let i = 0 ;i<15;i++){
           let div = document.createElement("div")
           div.className = "border-circular-right"
           div.style.backgroundColor = colorList[i%6]
           rightBorder.appendChild(div)
        }
        var count = 0
        setInterval(() => {
            count++
            let leftDiv = document.getElementsByClassName("border-circular-left")
            for(let i = 0;i<15;i++){
                leftDiv[i].style.backgroundColor = colorList[(count+i)%6]
            }
            let rightDiv = document.getElementsByClassName("border-circular-right")
            for(let i = 0;i<15;i++){
                rightDiv[i].style.backgroundColor = colorList[(count+i)%6]
            }
        }, 1000);



        // 点击按钮触发事件
        // function buttonClick(){
            setTimeout(()=>{
                let randomNumber = Math.floor(Math.random()*6) 
                circular.style.backgroundColor = colorList[randomNumber]
                setTimeout(()=>{
                    window.location = `${randomNumber+1}.html`
                },1500)
            },1000)
           
        // }
    
    </script>
</body>
</html>